<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex  justify-center  " style="flex-direction: row;align-items: center;">
			<!-- 			<image v-if="abu_theme_list[0]&&abu_theme_list[0].cover" mode="widthFix" class="picture2  "
				:src="abu_theme_list[0].cover.url"></image> -->
			<video v-if="abu_theme_list[0]" :src="abu_theme_list[0].video" controls></video>
		</view>
		<!-- 		<view class="video">
			<video :src="abu_theme_list[0].video" controls></video>
		</view> -->
		<view class="flex3   response  flex  justify-start  " style="flex-direction: column;">
			<view class="flex4   response  flex  justify-start  " style="flex-direction: column;">
				<text v-if="abu_theme_list[0]" class="text5 "> {{abu_theme_list[0].theme}}</text>
				<view class="flex6   response  flex  justify-start  " style="flex-direction: column;">
					<text v-if="abu_theme_list[0]" class="text7 ">
						{{abu_theme_list[0].content}}</text>
				</view>
			</view>
		</view>
		<button class="onebutton8  round cu-btn round bg-red" @click="complete"> 完成学习</button>
	</view>
</template>

<script>
	import Vue from 'vue'
	const db = uniCloud.database()
	let abu_theme_db = db.collection('abu-theme-study');
	let abu_study_log_db = db.collection('abu-study-log');
	export default {
		data() {
			return {
				already_study_time: 0,
				enterTime: 0,
				study_time: 0,
				user_info: {},
				abu_theme_list: [],
				id: '',
			};
		},
		async onLoad(e) {
			// 记录进入页面的时间
			this.enterTime = Date.now();
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			this.user_info = await uniCloud.getCurrentUserInfo();
			if (e) {
				this.id = e.id
			} else {
				this.id = "65face51a09a9b12d74eda75"
			}
			await this.load_s_time()
			await this.load_study_data()
			await this.update_study_count()
			uni.hideLoading()
		},
		methods: {
			async load_study_data() {
				await abu_theme_db.where({
					_id: this.id
				}).get().then(res => {
					console.log(res.result.data)
					this.abu_theme_list = res.result.data
				})
			},
			async update_study_count() {
				// 更新学习人数
				let study_count = this.abu_theme_list[0].count

				await abu_theme_db.where({
					_id: this.id
				}).update({
					count: study_count + 1
				})
			},
			async load_s_time() {
				const res_log = await abu_study_log_db.where({
					member_id: this.user_info.uid,
					education_id: this.id
				}).get()

				if (res_log.result.data.length != 0) {
					this.already_study_time = res_log.result.data[0].study_time
				}
			},
			async upload_study_time() {
				// 计算停留时间
				let stayTime = (Date.now() - this.enterTime) / 1000; // 转换为秒
				this.study_time = stayTime
				console.log(this.study_time);

				// 把记录写到log里面
				const res_log = await abu_study_log_db.where({
					member_id: this.user_info.uid,
					education_id: this.id
				}).get()
				console.log(res_log.result.data);
				if (res_log.result.data.length != 0) {
					let study_p = res_log.result.data[0].progress || 0
					await abu_study_log_db.where({
						member_id: this.user_info.uid,
						education_id: this.id
					}).update({
						study_time: parseInt(this.study_time + this.already_study_time),
						progress: study_p + 5
					})
				}
			},
			async complete() {
				let item = this.abu_theme_list[0]
				// 查询数据库是否已存在相同的记录
				await abu_study_log_db.where({
					member_id: this.user_info.uid,
					education_id: item._id
				}).get().then(queryRes => {
					if (queryRes.result.data.length > 0) {
						this.upload_study_time()
						// 如果存在相同记录，提示用户已经报名
						uni.showToast({
							title: '学习' + this.study_time + 's了',
							icon: 'none'
						});
					} else {
						// 如果不存在相同记录，进行添加
						abu_study_log_db.add({
							member_id: this.user_info.uid,
							education_id: item._id,
						}).then(res => {
							this.upload_study_time()
							uni.showToast({
								title: '完成学习',
								icon: 'success'
							});
						}).catch(err => {
							uni.showToast({
								title: '完成学习',
								icon: 'none'
							});
						});
					}
				}).catch(err => {
					console.error('查询报名记录失败', err);
				});






			}
		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
	}

	.picture2 {
		overflow: hidden;
	}

	.flex3 {
		width: 100%;
		width: calc(100% - 40rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.flex4 {
		width: 100%;
		margin-top: 40rpx;
	}

	.text5 {
		font-weight: 900;
	}

	.flex6 {
		width: 100%;
	}

	.text7 {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.onebutton8 {
		width: 100%;
		margin-top: 40rpx;
	}
</style>